// toast.js
class Toast {
  static instances = [];
  static SUPPORT_TRANSITION = 'transition' in document.documentElement.style;
  static defaultConfig = {
    content: '',
    duration: 2000,
    position: 'center',
    icon: null,
    mask: false,
    maskClassName: '',
    maskClickable: true,
    getContainer: () => document.body,
  };

  constructor(config) {
    this.visible = false;
    this.config = { ...Toast.defaultConfig, ...config };
    this.container = null;
    this.mask = null;
    this.toast = null;
    this.timer = null;
  }

  static info(content, duration, mask = false) {
    return Toast.show(content, duration, {
      icon: this._getInfoIcon(),
      mask
    });
  }

  static success(content, duration, mask = false) {
    return Toast.show(content, duration, {
      icon: this._getSuccessIcon(),
      mask
    });
  }

  static fail(content, duration, mask = false) {
    return Toast.show(content, duration, {
      icon: this._getFailIcon(),
      mask
    });
  }

  static loading(content, duration, mask = true) {
    return Toast.show(content, duration, {
      icon: this._getLoadingIcon(),
      mask,
      duration: 0
    });
  }

  static show(content, duration = 2000, config = {}) {
    let props = {
      content,
      duration,
      ...config
    };

    if (typeof content === 'object') {
      props = content;
    }

    const toast = new Toast(props);
    toast.show();
    return toast;
  }

  static clear(toast) {
    if (toast) {
      toast.clear();
    } else {
      Toast.instances.forEach(instance => instance.clear());
    }
  }

  show() {
    if (this.visible) return;

    this.visible = true;
    Toast.instances.push(this);

    this._createElements();
    this._setStyles();
    this._startTimer();
  }

  clear() {
    if (!this.visible) return;

    this.visible = false;
    this._clearTimer();

    if (Toast.SUPPORT_TRANSITION) {
      this.toast.addEventListener('transitionend', () => {
        this._destroy();
      }, { once: true });

      this.toast.style.opacity = '0';
      if (this.mask) {
        this.mask.style.opacity = '0';
      }
    } else {
      this._destroy();
    }
  }

  _createElements() {
    const { getContainer, mask, maskClassName, maskClickable, position } = this.config;

    // Create container
    this.container = document.createElement('div');
    this.container.className = 'adm-toast-container';
    getContainer().appendChild(this.container);

    // Create mask if needed
    if (mask) {
      this.mask = document.createElement('div');
      this.mask.className = `adm-toast-mask ${maskClassName}`;
      if (!maskClickable) {
        this.mask.style.pointerEvents = 'auto';
      }
      this.container.appendChild(this.mask);
    }

    // Create toast element
    this.toast = document.createElement('div');
    this.toast.className = `adm-toast ${position}`;

    // Create content
    const content = this._createContent();
    this.toast.appendChild(content);

    this.container.appendChild(this.toast);
  }

  _createContent() {
    const { icon, content } = this.config;
    const wrapper = document.createElement('div');
    wrapper.className = 'adm-toast-content';

    if (icon) {
      const iconElement = document.createElement('div');
      iconElement.className = 'adm-toast-icon';
      iconElement.innerHTML = icon;
      wrapper.appendChild(iconElement);
    }

    if (content) {
      const textElement = document.createElement('div');
      textElement.className = 'adm-toast-text';
      textElement.textContent = content;
      wrapper.appendChild(textElement);
    }

    return wrapper;
  }

  _setStyles() {
    if (!document.querySelector('#adm-toast-style')) {
      const style = document.createElement('style');
      style.id = 'adm-toast-style';
      style.textContent = `
        .adm-toast-container {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1000;
          pointer-events: none;
        }
        
        .adm-toast-mask {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.55);
          transition: opacity 0.3s;
          pointer-events: none;
        }
        
        .adm-toast {
          position: absolute;
          max-width: 70vw;
          padding: 12px 16px;
          border-radius: 8px;
          background-color: rgba(0, 0, 0, 0.7);
          color: #fff;
          text-align: center;
          transition: opacity 0.3s;
        }
        
        .adm-toast.center {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        .adm-toast.top {
          top: 20%;
          left: 50%;
          transform: translateX(-50%);
        }
        
        .adm-toast.bottom {
          bottom: 20%;
          left: 50%;
          transform: translateX(-50%);
        }
        
        .adm-toast-icon {
          font-size: 24px;
          line-height: 1;
          margin-bottom: 8px;
        }
        
        .adm-toast-text {
          font-size: 14px;
          line-height: 1.4;
        }
      `;
      document.head.appendChild(style);
    }
  }

  _startTimer() {
    const { duration } = this.config;
    if (duration > 0) {
      this.timer = setTimeout(() => {
        this.clear();
      }, duration);
    }
  }

  _clearTimer() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = null;
    }
  }

  _destroy() {
    if (this.container && this.container.parentNode) {
      this.container.parentNode.removeChild(this.container);
    }

    const index = Toast.instances.indexOf(this);
    if (index > -1) {
      Toast.instances.splice(index, 1);
    }
  }

  static _getInfoIcon() {
    return `
      <svg viewBox="0 0 1024 1024" width="40" height="40">
        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664h-64v-64h64v64zm0-236h-64V292h64v200z" fill="currentColor"/>
      </svg>
    `;
  }

  static _getSuccessIcon() {
    return `
      <svg viewBox="0 0 1024 1024" width="40" height="40">
        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8l157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" fill="currentColor"/>
      </svg>
    `;
  }

  static _getFailIcon() {
    return `
    <svg viewBox="0 0 1024 1024" width="40" height="40">
      <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4l-66.1.3c-4.4 0-8-3.5-8-8c0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359c-1.2-1.5-1.9-3.3-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4l66-.3c4.4 0 8 3.5 8 8c0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2c0 4.4-3.6 8-8 8z" fill="currentColor"/>
    </svg>
    `;
  }

  static _getLoadingIcon() {
    return `
      <svg viewBox="0 0 1024 1024" width="40" height="40" class="loading">
        <path d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960S64 759.4 64 512h64c0 212.1 171.9 384 384 384s384-171.9 384-384S724.1 128 512 128V64z" fill="currentColor"/>
        <style>
          .loading { animation: rotate 1s linear infinite; }
          @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        </style>
      </svg>
    `;
  }
}

export default Toast;